<template>
  <el-upload
    v-if="accept != '.pdf'"
    action="#"
    list-type="picture-card"
    :accept="accept"
    :limit="1"
    :multiple="false"
    :auto-upload="false"
  >
    <div class="uploade-wrap">
      <el-icon size="48" color="#C0C4CC" class="el-icon--upload"><upload-filled /></el-icon>
      <slot>
        <div class="desc">
          将{{ props.acceptText }}格式文件<br />
          拖拽框内
        </div>
      </slot>
      <span class="text-primary">或点击上传</span>
    </div>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <el-icon><zoom-in /></el-icon>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-upload v-else class="upload-pdf" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
    <div class="uploade-wrap">
      <el-icon size="48" color="#C0C4CC" class="el-icon--upload"><upload-filled /></el-icon>
      <div class="desc">
        将{{ props.acceptText }}格式文件<br />
        拖拽框内
      </div>
      <span class="text-primary">或点击上传</span>
    </div>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const props = defineProps({
  // 上传文件类型
  accept: {
    type: String,
    default: "image/*"
  },
  // 上传文件类型描述
  acceptText: {
    type: String,
    default: "图片"
  }
});

const imageUrl = ref("");

// 上传成功
const handleAvatarSuccess = () => {};
</script>

<style lang="scss" scoped>
.upload-pdf {
  :deep(.el-upload-dragger) {
    padding: 0;
    width: 148px;
    height: 148px;
  }

  :deep(.el-icon--upload) {
    margin: 0;
    padding-top: 15px;
    color: #c0c4cc !important;
  }
}
.avatar-uploader {
  background: #fff;
  width: 148px;
}
.avatar-uploader :deep(.el-upload--picture-card) {
  background: #fff;
}
.uploade-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 20px;
  font-size: 12px;

  .desc {
    color: #909399;
    padding: 8px 0 4px;
  }
}
</style>
